<template>
    <div class="box-wrap">
        <div class="top">
            <div class="back" @click="$router.back(-1)">返回</div>
        </div>
        <el-row :gutter="20">
            <el-col :span="4" v-for="(item,index) in dataList" :key="index">
                <div class="btn" :class="item.status | statusToColor" @click="goEnter(item)">
                    {{item.scodeName}}
                    <i class="el-icon-view" @click.stop="showMessage(item.message)"></i>
                </div>
            </el-col>
        </el-row>
        <el-dialog title="数据实时更新时间" :visible.sync="dialogVisibleMessage" width="600px" append-to-body @close="closeDialog('dialogVisibleMessage')"
            :close-on-click-modal="false">
            <el-table :data="message" style="width: 100%">
                <el-table-column prop="name" label="表名" width="200" align="center">
                </el-table-column>
                <el-table-column prop="tableName" label="中文表名" width="200" align="center">
                </el-table-column>
                <el-table-column prop="time" label="推送时间" width="200" align="center">
                </el-table-column>
            </el-table>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>

        <el-dialog title="核验条件选择" :visible.sync="dialogVisible" @close="closeDialog('dialogVisible')" :close-on-click-modal="false">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="时间">
                    <el-date-picker v-model="dateRange" type="datetimerange" range-separator="至" start-placeholder="开始日期"
                        :default-time="['00:00:00', '23:59:59']" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="表名">
                    <el-select v-model="form.tableName" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.tableCode" :label="item.tableCodeName"
                            :value="item.tableCode">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据中心">
                    <div class="df">
                        <el-select v-model="form.sjzxIp" placeholder="请选择" style="margin-right:20px" clearable>
                            <el-option v-for="item in sjzxIpOptions" value-key="scodeName" :key="item.scodeName"
                                :label="item.scodeName" :value="item.ptIp">
                            </el-option>
                        </el-select>
                        <el-checkbox v-model="checkedALL">全部</el-checkbox>
                    </div>
        
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm" :loading="loadingForm">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="数据流向" :visible.sync="dialogVisibleS" @close="closeDialog('dialogVisibleS')" append-to-body
            :close-on-click-modal="false">
            <div class="border-wrap" v-if="info">
                <div class="df">
                    <div class="item item1 green">
                        {{baqName}}(数量：{{info.baqCount}})
                    </div>
                    <div class="line" :class="info.resultBaqData ? 'red' : 'green'"> 
                        <div class="icon"><el-popover v-if="info.resultBaqData" placement="top" width="250" trigger="hover" v-model="visibleBaq">
                            <p style="margin-bottom:10px">核查差异数据{{info.baqCount - info.sjzxCount}}条，建议手动同步或检查对接</p>
                            <el-button type="primary" size="small" @click="getInfo(info.resultBaqData, 'resultBaqData', 'loadBaq')" :loading="loadBaq">手动同步</el-button>
                            <i class="el-icon-warning red" type="text" slot="reference" @click="showPorover('visibleBaq')"></i>
                        </el-popover></div>
                    </div>
                    <div class="item item4" :class="info.resultBaqData ? 'red' : 'green'">
                        {{infoName}}(数量：{{info.sjzxCount}})   
                    </div>
                    <div class="line" :class="info.resultBaqData || info.resultSjzxData ? 'red' : 'green'"> 
                        <div class="icon">
                            <el-popover v-if="info.resultSjzxData" placement="top" width="250" trigger="manual" v-model="visibleSjzx">
                                <p style="margin-bottom:10px">核查有差异数据{{info.sjzxCount - info.stSjzxCount}}条，建议手动同步或检查对接</p>
                                <el-button type="primary" size="small" @click="getInfo(info.resultSjzxData, 'resultSjzxData', 'loadSjzx')" :loading="loadSjzx">手动同步</el-button>
                                <i class="el-icon-warning red" type="text" slot="reference" @click="showPorover('visibleSjzx')"></i>
                            </el-popover>
                        </div>
                    </div>
                    <div>
                        <div class="item item2 df" :class="info.resultBaqData || info.resultSjzxData ? 'red' : 'green'">
                            {{zfjdList[0].fcodeName}}(数量：{{info.stSjzxCount}})
                        </div>
                        <div class="line1" :class="info.resultBaqData || info.resultSjzxData || info.resultZfjdData ? 'red' : 'green'">
                            <div class="icon">
                                <el-popover v-if="info.resultZfjdData" placement="top" width="250" trigger="manual" v-model="visibleZfjd">
                                    <p style="margin-bottom:10px">核查有差异数据{{info.stSjzxCount - info.zfjdCount}}条，建议手动同步或检查对接</p>
                                    <el-button type="primary" size="small" @click="getInfo(info.resultZfjdData, 'resultZfjdData', 'loadZfjd')" :loading="loadZfjd">手动同步</el-button>
                                    <i class="el-icon-warning red" type="text" slot="reference" @click="showPorover('visibleZfjd')"></i>
                                </el-popover>
                            </div>
                        </div>
                        <div class="item item3 df" :class="info.resultBaqData || info.resultSjzxData || info.resultZfjdData ? 'red' : 'green'">
                            {{zfjdList[0].scodeName}}(数量：{{info.zfjdCount}})
                            
                        </div>
                    </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
        
            </span>
        </el-dialog>
    </div>
</template>

<script>
 import * as dayjs from 'dayjs'
import Api from './api/api';
export default {
    data() {
        return {
            dataList:[],
            title:'',
            loadingInfo: false,
            dialogVisible: false,
            dialogVisibleMessage: false,
            dialogVisibleS: false,
            dialogVisibleT: false,
            loadBaq: false,
            loadSjzx: false,
            loadZfjd: false,
            dateRange:[],
            message:[],
            tabName:[],
            options:[{
                label:'表1',
                value:0
            }, 
            {
                label: '表2',
                value: 1
            }, 
            {
                label: '表3',
                value: 2
            }],
            form:{
                sjzxIp:'',
                tableName:''
            },
            sjzxIpOptions:[],
            zfjdList:[],
            checkedALL:false,
            loadingForm:false,
            hcAllTableData:[],
            ptIp:'',
            info:null,
            tableData:[],
            pageInfo: {
                pageSize: 10,
                pageNum: 1,
                total: 0
            },
            allTableData:[],
            visibleBaq:false,
            visibleSjzx:false,
            visibleZfjd:false,
            baqName:''
        }
    },
    created(){
        this.scode = this.$route.params.scode 
        this.ptIp = this.$route.params.ptIp 
        this.getPtTree()
        this.dateRange = [dayjs(new Date()).format("YYYY-MM-DD") + ' 00:00:00', dayjs(new Date()).format("YYYY-MM-DD") + ' 23:59:59']
    },
    methods: {

        handleSizeChange (val) {
            this.pageInfo.pageSize = val
            this.pageInfo.pageNum = 1
            this.getDataList(this.allTableData, 'tableData')
        },
        handleCurrentChange (val) {
            this.pageInfo.pageNum = val
            this.getDataList(this.allTableData, 'tableData')
        },
        closeDialog (name) {
            this[name] = false
            this.visibleSjzx = false
            this.visibleZfjd = false
            this.visibleBaq = false
            this.loadingForm= false
        },
        showPorover(name){
            this[name] = !this[name]
        },
        //获取表名
        getPtTableConfig () {
            let callBack = res => {
                this.options = res.data
            }
            Api.queryPtTableConfig({}, callBack)
        },
        getPtTree () {
            let callBack = res => {
                this.dataList = res.data || []
                if(this.dataList.length==0) return
                this.dataList.forEach(item => {
                    Api.querySjjcLogInfo({ code: item.scode, createTime: dayjs(new Date()).format("YYYY-MM-DD HH:mm:ss") },(res)=>{
                        if(res.data&&res.data.length!=0){
                            this.$set(item, 'status', res.data[0].status)
                            this.$set(item, 'message', res.data[0].message)
                        } else{
                            this.$set(item, 'status', 0)
                        }
                    })
                })
            }
            Api.queryPtxjInfo({ sCode: this.scode }, callBack)
        },
        handleClose(){
            this.dialogVisible = false
            this.dateRange = []
        },
        goEnter (item) {
            if(item.status==0) return
            if (item.scode =='150000000000Z'){
                this.dialogVisible = true
                this.selectItem = item
                this.form.tableName = ''
                this.form.sjzxIp = ''
                this.checkedALL = false
                this.getPtTableConfig()
                let callBack = (res)=>{
                    let arr = res.data
                    if (arr.length!=0){
                        this.sjzxIpOptions = arr.filter(item => item.ptCode != 3)
                        this.zfjdList = arr.filter(item => item.ptCode == 3)
                    }
                }
                Api.queryPtxjInfo({ sCode: item.fcode }, callBack)
            } else{
                this.$router.push({ name: 'dataDetectionThird', params: { scode: item.scode, ptCode: item.ptCode, ptIp: item.ptIp } })
            }
           
        },

        async submitForm () {
            this.loadingForm = true
            this.info = null
            if (!this.form.tableName) return this.$message.error('请选择表名')
            if (!this.checkedALL && !this.form.sjzxIp) return this.$message.error('请选择数据中心')
            let params = {
                startTime: '',
                endTime: '',
                tableName: this.form.tableName,
                zfjdIp: this.selectItem.ptIp,
                sjzxIp: '',
                stSjzxIp: this.ptIp
            }
            if (this.dateRange && this.dateRange.length != 0) {
                params.startTime = this.dateRange[0]
                params.endTime = this.dateRange[1]
            } else {
                params.startTime = null
                params.endTime = null
            }

            let sjzxIp = [], sjzxCode = []
            if (this.checkedALL) {
                sjzxIp = this.sjzxIpOptions.map(item => item.ptIp)
                sjzxCode = this.sjzxIpOptions.map(item => item.scode)
                params.sjzxIp = sjzxIp
                this.infoName = '全部数据中心'
                this.baqName = '全部办案区'
                this.sjzxIp = sjzxIp
                this.sjzxCode = sjzxCode.join(',')
            } else {
                params.sjzxIp = [this.form.sjzxIp]
                let obj = this.sjzxIpOptions.filter(item => item.ptIp == this.form.sjzxIp)
                this.infoName = obj[0].scodeName
                this.sjzxIp = [this.form.sjzxIp]
                this.sjzxCode = obj[0].scode
                this.baqName = this.infoName.replace(/数据中心/,'') + '全部办案区'
            }

            Api.checksszx({ ...params }, (res) => {
                if (res.code == 20001) {
                    this.info = res.data
                    this.loadingForm = false
                    this.dialogVisibleS = true
                } else {
                    this.loadingForm = false
                    this.$message.error(res.data)
                }
            })

        },

        getInfo (info, name,type) {
            this[type] = true
            this.loadingInfo = true
            let parmas = {
                [name]: info,
                stSjzxIp: this.ptIp,
                tableName: this.form.tableName
            }     
            Api.insertSjzxData(parmas, (res) => {
                if (res.code == 20001) {
                    this.$message.success(res.msg)
                    this.dialogVisibleT = false
                    this.dialogVisibleS = false
                    this.visibleSjzx = false
                    this.visibleZfjd = false
                    this.visibleBaq = false
                    this.loadingInfo = false
                    this[type] = false
                } else {
                    this[type] = false
                    this.loadingInfo = false
                    this.$message.error(res.data)
                }

            })
        },

        showMessage (message) {
            if (!message) return
            this.dialogVisibleMessage = true
            let msg = JSON.parse(message)
            this.message = []
            msg.forEach(item => {
                let obj = {
                    name: '',
                    tableName: '',
                    time: ''
                }
                for (let i in item) {
                    if (i != 'tableName') {
                        obj.name = i
                        obj.time = item[i]
                    } else {
                        obj.tableName = item[i]
                    }
                }
                this.message.push({ ...obj })

            })
        },
    },
    filters:{
        statusToColor(obj){
            let item={
                0:'gray',
                1:'green'
            }
            return item[obj]
        }
    }
}
</script>


